<template>
  <div class="editor">
    <header>
      <div class="editor-tool">
        <div class="editor-tool-left">
          <tool-left ref="tool-left" />
        </div>
        <div class="editor-tool-right">
          <tool-right ref="tool-right" />
        </div>
      </div>
    </header>
    <main>
      <div id="sider" class="editor-side">
        <sider-main  ref="sider-main" />
      </div>
      <div id="renderer" class="editor-render">
        <div class="editor-render-top">
          <render-top  ref="render-top" />
        </div>
        <div class="editor-render-bottom">
          <render-bottom  ref="render-bottom" />
        </div>
      </div>
      <div id="setter" class="editor-setter">
        <div class="editor-setter-header">
          <setter-header  ref="setter-header" />
        </div>
        <div class="editor-setter-content">
          <setter-content ref="setter-content" />
        </div>
      </div>
      <div id="floater" class="editor-floater">
        <div class="editor-floater-setter">
          <setter-float ref="setter-float" />
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import ToolLeft from './components/ToolLeft.vue';
import ToolRight from './components/ToolRight.vue';
import SiderMain from './components/SiderMain.vue';
import RenderTop from './components/RenderTop.vue';
import RenderBottom from './components/RenderBottom.vue';
import SetterHeader from './components/SetterHeader.vue';
import SetterContent from './components/SetterContent.vue';
import SetterFloat from './components/SetterFloat.vue';

import { createNamespacedHelpers } from 'vuex'

const { mapState, mapMutations } = createNamespacedHelpers('editor');

import { useLayout } from '@/lcd.engine';

import window from '@/mixins/window';

import { getConfiguredViewsDetailInfo } from '@/api/home.js';

import { isObject } from '@/utils';

export default {
  name: 'Editor',
  mixins: [
    window
  ],
  components: {
    ToolLeft,
    ToolRight,
    SiderMain,
    RenderTop,
    RenderBottom,
    SetterHeader,
    SetterContent,
    SetterFloat
  },
  methods: {
    ...mapMutations([
      'handleLayout',
      'handleRestore',
      'handleSchema',
      'handleName',
      'handleViewId',
      'handleCanvasImg',
      'handleCover',
      'handleReset',
      'handleReplaceComponent',
      'handleGraph'
    ])
  },
  watch: {
    layout: {
      deep: true,
      handler(val, oldVal) {
        // console.log('val', val)
        useLayout(val, ['sider', 'renderer', 'setter', 'floater']);
      }
    },
    windowWidth: {
      immediate: true,
      handler(val, oldVal) {
        if(val > 1000) {
          this.handleLayout([1, 1])
        } else {
          this.handleLayout([0, 0])
        }
      }
    },
    '$route': {
      deep: true,
      immediate: true,
      handler(val, oldVal) {
        this.handleReset();
      }
    }
  },
  created() {
    getConfiguredViewsDetailInfo({
      viewId: this.$route.params.id,
      pageNum: 1,
      pageSize: 10
    }).then(res => {
      if(res.code == '0') {
        if(res.data.viewValue) {
          const schema = JSON.parse(res.data.viewValue);
          console.log('schema', schema);
          this.handleSchema(schema);
          // 处理封面
          if(schema.thumbnail) {
            this.handleCanvasImg(schema.thumbnail)
          }
          // 处理getComponentList: meta ==> getComponentList
          /**
           * attr: {
                x: Number,
                y: Number,
                w: Number,
                h: Number
              },
              key,
              id,
              zIndex,
              prop: {},
              global: [],
              DELETE: false,
              RESIZE: true,
              UPDATE: false
           */
          if(schema.meta && isObject(schema.meta)) {
            const componentList = Object.entries(schema.meta).map(m => {
              return {
                id: m[0],
                key: m[1].key,
                global: m[1].global,
                prop: m[1].prop,
                attr: m[1].attr,
                zIndex: m[1].zIndex,
                DELETE: m[1].DELETE,
                RESIZE: m[1].RESIZE,
                UPDATE: m[1].UPDATE,
              }
            });
            console.log('componentList', componentList);
            this.handleReplaceComponent(componentList)
          }
        } else {
          this.handleName(res.data.viewName);
          this.handleViewId(res.data.viewId);
          this.handleCover(res.data.viewCoverAddress);
        }
      }
    })
  },
  mounted() {
    useLayout(this.layout, ['sider', 'renderer', 'setter', 'floater']);
  },
  computed: {
    ...mapState([
      'status',
      'layout',
      'selectStack',
      'selectKey',
      'schema',
      'backStack',
      'forwardStack'
    ]),
  }
}
</script>

<style lang="less" scoped>
@import '~@/styles/vars.less';
.editor {
  height: 100%;
  padding-top: 12px;

  header {
    background-color: @dark-color-2;
    box-shadow: 0 1px 0 0 darken(@dark-color, lightness(@dark-color));
    height: 56px;

    .editor-tool {
      display: flex;
      align-items: center;
      padding: 0 16px;
      height: 100%;

      &-left {
        flex: 1;
        position: relative;
        height: 100%;
      }

      &-right {
        flex: 1;
        position: relative;
        height: 100%;
      }
    }
  }

  main {
    margin-top: 2px;
    height: calc(100% - 58px);
    display: flex;
    position: relative;

    .editor-side {
      height: 100%;
      background-color: lighten(@dark-color, 10.2% - lightness(@dark-color));
    }

    .editor-render {
      height: 100%;
      display: flex;
      flex-direction: column;

      &-top {
        flex: 15;
      }

      &-bottom {
        flex: 1;
      }
    }

    .editor-setter {
      height: 100%;
      display: flex;
      flex-direction: column;
      background-color: lighten(@dark-color, 10.2% - lightness(@dark-color));

      &-header {
        flex: 48;
      }

      &-content {
        flex: 900;
      }
    }

    .editor-floater {
      position: absolute;
      right: 0;
      top: 60px;
    }
  }
}
</style>